<script setup lang="ts">
// import GColorPicker from '@/components/design-color-picker/g-color-picker.vue';
// import GColorPickerPanel from '@/components/design-color-picker/g-color-picker-panel.vue';
import {
  GColorPicker,
  GColorPickerPanel,
} from '@/components/g-color-picker'

import SwipeNumber from '@/components/swipeNumber/swipeNumber.vue'
import MAUpload from '@/components/upload/m-a-upload.vue'
import { reactive } from 'vue'

const color = ref('#0052d9')
const color2 = ref('#0052d9')
const recCols = ref(['red'])
const fitOptions = reactive([
  {
    value: 'cover',
    label: '覆盖',
  },
  {
    value: 'fit',
    label: '适应',
  },
  {
    value: 'strench',
    label: '拉伸',
  },
  {
    value: 'clip',
    label: '裁剪',
  },
  {
    value: 'repeat',
    label: '平铺',
  },
])
const fit = ref('cover')
const newOpacity = ref(100)
</script>

<template>
  <ACard>
    <ASpace align="baseline">
      <ACard title="基于arco的颜色选择器（后续可提供扩展插槽）">
        <ASpace align="start">
          <div>
            <ADivider orientation="left">
              面板使用
            </ADivider>
            <GColorPickerPanel
              v-model="color"
              :enable-alpha="true"
            />
          </div>
          <div>
            <ADivider orientation="left">
              基础使用
            </ADivider>
            <!--  recentColors 在非面板组件时暂时不可用 -->
            <GColorPicker
              v-model="color"
              :enable-alpha="true"
              :recent-colors="null"
            />
          </div>
          <div>
            <ADivider orientation="left">
              tab插槽
            </ADivider>
            <!--  recentColors 在非面板组件时暂时不可用 -->
            <GColorPicker
              v-model="color"
              :enable-alpha="true"
              :recent-colors="null"
              :cus-color-modes="{ image: '图片填充', image2: '图片填充2' }"
              width="430px"
            >
              <template #image-view>
                自定义预览
              </template>
              <template #image-panel>
                <div class="pattern-box">
                  <div class="upload-box">
                    <MAUpload
                      list-type="picture-card"
                      :limit="1"
                      image-preview
                      accept=".png,.jpg,.jpeg"
                    />
                  </div>
                  <ARow>
                    <ACol>
                      <ASelect
                        v-model="fit"
                        :options="fitOptions"
                      >
                        <template #prefix>
                          填充模式
                        </template>
                      </ASelect>
                    </ACol>
                  </ARow>
                  <ARow>
                    <ACol>
                      <SwipeNumber
                        v-model="newOpacity"
                        size="small"
                        :min="0"
                        :max="100"
                        :step="1"
                        style="padding: 0 12px"
                        label-width="68px"
                      >
                        <template #label>
                          <div style="text-align: right;padding-right: 12px">
                            <IconMosaic style="margin-right: 2px" />透明度
                          </div>
                        </template>
                        <template #suffix>
                          <div>%</div>
                        </template>
                      </SwipeNumber>
                    </ACol>
                  </ARow>
                </div>
              </template>
              <template #image2-panel>
                自定义面板2
              </template>
            </GColorPicker>
          </div>
        </ASpace>
      </ACard>
    </ASpace>
  </ACard>
</template>

<style lang="less">
@color-picker-panel-width:350px !important;
</style>
